<template>
  <view class="check-in-dialog">
    <view class="header">
      <view class="tool">
      <picker
          @change="bindPickerChange"
          :value="index"
          :range="array"
          range-key="name"
          class="normal-control-con-picker"
        >
          <view class="picker-content">
            <view style="display: inline-block" class="uni-input">{{
              selectedFloor ? selectedFloor + "F" : "选择楼层"
            }}</view>
            <view class="img" style="display: inline-block; float: right">
              <image
                class="nav-list-item-arr-show"
                src="https://szgd-dev.tgovcloud.com/public/images/checkin/arrow-down.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </picker>

        <view class="search-room-num">
          <image src="https://szgd-dev.tgovcloud.com/public/images/checkin/icon-search.png"></image>
          <input
            class="uni-input"
            style="padding-left: 64rpx"
            placeholder="可输入房间号搜索"
            v-model="searchValue"
            @blur="searchRoomNum"
          />
        </view>

      </view>
      <view class="tips">以下房间为已入住</view>
    </view>

    <scroll-view scroll-y="true" class="floor-content" @scroll='scorllView' :scroll-top='scrollViewTop'>
      <radio-group v-if="floorList.length" class="check-content">
        <ul>
          <li v-for="item in floorList" :key="item.roomFloor">
            <h2 class="liHeader" v-if="item.rooms.length">
              {{ item.name }}F
            </h2>
            <div class="liContentwraper">
              <template v-for="(list, key) in item.rooms">
                <div
                  :class="
                    roomCheck == list.roomNum
                      ? 'roomContainer roomContainerCheck'
                      : 'roomContainer'
                  "
                  :key="key"
                  @click="
                    () => {
                      radioChange(list);
                    }
                  "
                >
                  <div class="top">{{ list.roomNum }}房</div>

                  <label class="status-wrapper">
                    <p class="status-ruzhu green-status">
                      {{ list.rs }}人
                    </p>
                  </label>
                </div>
              </template>
            </div>
          </li>
        </ul>
      </radio-group>
      <view v-else class="placeholder">暂无数据～</view>
    </scroll-view>
    <view>
      <uni-popup ref="popup" type="bottom" background-color="#fff">
        <view class="room-detail-content">
          <room-detail
            :type="type"
            :roomNum="roomNum"
            :personList="personList"
            :idList="idList"
            :searchValue="searchValue"
            :selectedFloor="selectedFloor"
          ></room-detail>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { getData, houseInfo, houseInfoDetail } from "@/api";
import RoomDetail from "./roomDetail.vue";
export default {
  props: ["value", "houseId"],
  data() {
    return {
      roomCheck: this.value,
      roomId: this.houseId,
      roomNum: [],
      searchValue: "",
      index: "0",
      roomList: [],
      array: ["楼层选择", "1楼", "2楼", "3楼", "4楼"],
      selectedFloor: "", // 选中的楼层
      personList: [], // 根据房间编码查询住房人员
      type: "", // 从什么类型的跳过来
      showPopup: false,
      idList:[],
      scrollViewTop:0 // 滚动条位置
    };
  },
  computed: {
    floorList() {
      this.roomList.forEach(t => {
        t.rooms = t.houseStaticalVoList.filter(t => t.rs > 0);
      });
      let floors = this.roomList.filter(t => t.rooms.length);
      return floors;
    }
  },
  methods: {
    onDialogClose() {
      this.$emit("onClose");
    },
    radioChange(item) {
      this.roomCheck = item.roomNum;
      this.roomId = item.houseId;
      this.roomNum = item.roomNum;
      let that = this;
      // 根据房间编码查询住房人员
      // houseInfo(this.roomId).then((rs) => {
      //   that.personList = rs;
      // });
      houseInfoDetail({houseId: this.roomId}).then((rs) => {
        that.personList = rs;
      });
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("bottom");
    },
    searchRoomNum() {
      // 搜索时清除楼层选择
      this.selectedFloor = "";

      let hotelId = uni.getStorageSync("hotelId")
      getData("publicRoomList", "get", { hotelId: hotelId, roomNum: this.searchValue }).then((res) => {
        let roomList = res || [];
        this.roomList = roomList;
      });
    },
    bindPickerChange(e) {
      // 选择楼层清除搜索关键词
      this.searchValue = "";

      // console.log("picker发送选择改变，携带值为", e.target.value);
      let target = e.target.value ? this.array[e.target.value] : "";

      let { name } = target;
      this.selectedFloor = name;

      let hotelId = uni.getStorageSync("hotelId")

      getData("publicRoomList", "get", { hotelId: hotelId, name: name }).then((res) => {
        let roomList = res || [];
        this.roomList = roomList;
      });
    },

    removeSoStorage(){
      this.$store.commit('REMOVE_DATA_IGP')
    },
    // 回显筛选数据
    saveData(hotelId){
      let curSelectedFloor = uni.getStorageSync("curSelectedFloor");
      let curSearchValue = uni.getStorageSync("curSearchValue");
      console.log('缓存选择楼层：',curSelectedFloor);
      console.log('缓存搜索房间：',curSearchValue);
      if (curSelectedFloor || curSearchValue) {
        this.searchValue = curSearchValue;
        this.selectedFloor = curSelectedFloor;
        let parmas = {
          hotelId: hotelId, 
          name: curSelectedFloor,
          roomNum: curSearchValue
        }
        getData("publicRoomList", "get", parmas).then((res) => {
          let roomList = res || [];
          this.roomList = roomList;
        });
      }
    },
    scorllView(e){
      uni.setStorageSync('scrollViewTop', e.detail.scrollTop)
    },
  },
  onLoad(options) {
    // 从什么类型的跳过来
    this.type = options.type
  },
  onReady() {
    uni.showLoading();
    let hotelId = uni.getStorageSync("hotelId");
    getData("publicRoomList", "get", { hotelId: hotelId }).then((res) => {
      let roomList = res || [];
      roomList.sort((a, b) => {
        return a.name - b.name;
      });
      this.roomList = roomList;
      this.array = this.floorList.map(t => ({ name: t.name }));

      this.saveData(hotelId);

      uni.hideLoading();
      console.log(res)
      // 设置距离顶部位置
      this.$nextTick(()=>{
        this.scrollViewTop = uni.getStorageSync('scrollViewTop') || 0;
      })
    });
  },
  onShow() {
    // 用于解决重成功页面返回当前页面房间状态未更新问题
    console.log("reload");
    uni.$on("reload", (res) => {
      if (res.data.name == "reload") {
        let hotelId = uni.getStorageSync("hotelId");
        getData("publicRoomList", "get", { hotelId: hotelId, roomNum: this.searchValue }).then(
          (res) => {
            let roomList = res || [];
            roomList.sort((a, b) => {
              return a.name - b.name;
            });
            this.roomList = roomList
            this.array = this.floorList.map(t => ({ name: t.name }));

            this.saveData(hotelId);
          }
        );
      }
      // 清除监听
      uni.$off("reload");
    });
    this.removeSoStorage();
  },
  components: {
    RoomDetail,
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.placeholder {
  padding-top: 50rpx;
  text-align: center;
  color: #ccc;
}
.check-in-dialog {
  overflow: auto;
  position: relative;
  padding-top: 30rpx;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
}
.floor-content {
  flex: 1;
  overflow-y: auto;
}
.check-content {
  margin-bottom: 192rpx; //取消/确定按钮
}
.block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 97rpx;
  margin: 0 32rpx;
  .title {
    font-size: 40rpx;
    color: #000000;
    font-weight: bold;
  }
  .text {
    color: #d93f06;
    font-size: 24rpx;
    text-align: right;
  }
}

.uni-searchbar__box {
  border-radius: 60rpx !important;
  background-color: #fff !important;
}

.header {
  padding-bottom: 20rpx;
  background: #ffffff;
  .tips {
    color: #d93f06;
    font-size: 24rpx;
    margin-left: 66rpx;
    margin-top: 24rpx;
    &:before {
      content: "";
      position: absolute;
      left: 25rpx;
      width: 34rpx;
      height: 34rpx;
      background: url("https://szgd-dev.tgovcloud.com/public/images/tips-icon.png") no-repeat;
      background-size: contain;
    }
  }
}
.tool {
  display: flex;
  justify-content: center;
  align-items: center;
  .picker-content {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    width: 240rpx;
    height: 56rpx;
    border: 1rpx solid #999999;
    opacity: 1;
    border-radius: 60rpx;
    position: relative;
    color: #999999;
  }
  .normal-control-con-picker {

    .uni-input {
      text-align: left;
      padding-left: 30rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #000000;
    }
    .img {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      .nav-list-item-arr-show {
        display: inline-block;
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
  .search-room-num {
    display: flex;
    align-items: center;
    width: 436rpx;
    height: 56rpx;
    background: #ffffff;
    border: 1rpx solid #999999;
    opacity: 1;
    border-radius: 60rpx;
    position: relative;
    image {
      display: inline-block;
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      left: 10rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    ::-webkit-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Firefox 4-18 */
    :-moz-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Firefox 19-50 */
    ::-moz-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
    :-ms-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Edge (also supports ::-webkit-input-placeholder) */
    ::-ms-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* CSS Working Draft */
    ::placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }
  }
}
.liHeader {
  background: #f7f7f7;
  height: 48rpx;
  line-height: 48rpx;
  margin-bottom: 22rpx;
  padding-left: 32rpx;
  font-size: 34rpx;
}
.liContentwraper {
  display: flex;
  padding: 0 32rpx;
  justify-content: space-between;
  flex-wrap: wrap;
}
.roomContainer {
  width: 328rpx;
  height: 160rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 68rpx;
    font-size: 30rpx;
    
    .status {
      background-color: #daffd5;
      text-align: center;
      color: #66dd55;
    }
    .status-ruzhu {
      background-color: #fbebe5;
      text-align: center;
      line-height: 64rpx;
      color: #d93f06;
      border-radius: 0rpx 16rpx 0rpx 16rpx;
    }
  }
  .status-wrapper {
    position: relative;

    font-size: 30rpx;
    font-weight: 500;
    background: #f2f2f2;
    p {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 92rpx;
      border-radius: 0rpx 0rpx 16rpx 16rpx;
    }

    .green-status {
      color: #66dd55;
      background-color: #daffd5;
    }
    .red-status {
      color: #f15b53;
      background-color: #fcdedc;
    }
  }
}
.roomContainerCheck {
  border: 2rpx solid #2c9af1;
  .roomNum {
    color: #2c9af1;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border: 1px solid #efefef;
  background: #fff;
  button {
    margin: 30rpx 32rpx;
  }
  .cancle {
    width: 328rpx;
    color: #000000;
    font-size: 34rpx;
    background: #fff;
    border: 1rpx solid #cccccc;
    border-radius: 16rpx;
    margin-right: 30rpx;
  }
  .dialogOk {
    color: #fff;
    font-size: 34rpx;
    background: #2c9af1;
    border-radius: 16rpx;
  }
}
</style>
